import { useEffect, useState } from "react";
import Slideshow from "../../components/Slideshow";
import { Image } from "react-vant";
import Text_Carousel from "../../components/Text_Carousel";
import instance from "../utils/https";
import "@/css/Explain.less";

interface Activity {
  _id: string;
  accumulatedNum: number;
  announcement: string;
  endTime: string;
  isStart: boolean;
  joinNum: number;
  rule: string;
  startTime: string;
  title: string;
  visitNum: number;
  __v: number;
}

export default function Explain() {
  const [activityList, setActivityList] = useState<any>([]);
  const [title, setTitle] = useState<any>();
  const [activityLists, setActivityLists] = useState<Activity | null>(null);
  //获取活动信息
  const getactivity = async () => {
    const res = await instance.get("/explain/getExplain");
    console.log(res);
    
    setActivityList((res as any).acspeak);
    setTitle(res.data[0].title);
  };

  const getActivityInfo = async () => {
    try {
      const res: any = await instance.get("/homePage/getVisit");
      console.log(res);
      
      setActivityLists(res.data || null); // 假设只使用第一个活动
    } catch (error) {
      console.error("获取活动信息失败", error);
    }
  };
  useEffect(() => {
    getactivity();
    getActivityInfo();
  }, []);
  return (
    <div className="explain">
      <Text_Carousel activityList={activityLists} />
      <Slideshow />
      <div className="contents">
        <p className="title"> {`《调味大师${title}》`}</p>
        <div className="imgs">
          {activityList.map((item: any) => {
            return (
              <div key={item._id}>
                <Image
                  className="s"
                  lazyload
                  src={item.imgsrc}
                  key={item._id}
                  alt=""
                />
                <p className="content">{item.content}</p>
              </div>
              
            );
          })}
        </div>
      </div>
    </div>
  );
}
